<template>
  <div class="admin-users">
    <!-- 小猫装饰动画 - 移到顶部 -->
    <div class="cat-playground">
      <div class="sleeping-cat">
        <div class="cat-body">
          <div class="cat-head">
            <div class="cat-ear left"></div>
            <div class="cat-ear right"></div>
            <div class="cat-face">
              <div class="cat-eyes">
                <div class="cat-eye"></div>
                <div class="cat-eye"></div>
              </div>
            </div>
          </div>
          <div class="cat-torso"></div>
          <div class="cat-tail"></div>
        </div>
        <div class="zzz">
          <span>Z</span>
          <span>Z</span>
          <span>z</span>
        </div>
      </div>
      <div class="plants">
        <div class="plant"></div>
        <div class="plant"></div>
        <div class="plant"></div>
      </div>
      <div class="user-tip">
        <div class="tip-icon">💡</div>
        <div class="tip-text">欢迎来到用户管理页面 - 用户管理有助于维护平台社区健康发展</div>
      </div>
    </div>
    
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索用户名、邮箱..." 
          class="admin-form-input search-input"
          @input="handleSearch"
        >
        <button class="search-btn">
          🔍
        </button>
      </div>
      
      <div class="filter-options">
        <select v-model="statusFilter" class="admin-form-input filter-select" @change="handleFilter">
          <option value="">全部状态</option>
          <option value="active">活跃</option>
          <option value="inactive">非活跃</option>
          <option value="blocked">已封禁</option>
        </select>
        
        <select v-model="roleFilter" class="admin-form-input filter-select" @change="handleFilter">
          <option value="">全部角色</option>
          <option value="user">普通用户</option>
          <option value="vip">VIP用户</option>
          <option value="moderator">版主</option>
        </select>
      </div>
      
      <div class="action-buttons">
        <button class="admin-btn admin-btn-primary" @click="exportData">导出数据</button>
      </div>
    </div>
    
    <!-- 用户列表 -->
    <div class="users-list">
      <!-- 加载状态 -->
      <div class="loading-container" v-if="loading">
        <div class="loading-spinner"></div>
        <p>正在加载用户数据...</p>
      </div>
      
      <table class="admin-table" v-else>
        <thead>
          <tr>
            <th style="width: 50px;">ID</th>
            <th style="width: 60px;">头像</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th style="width: 120px;">注册时间</th>
            <th style="width: 80px;">角色</th>
            <th style="width: 80px;">挑战数</th>
            <th style="width: 80px;">积分</th>
            <th style="width: 80px;">状态</th>
            <th style="width: 150px;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in filteredUsers" :key="user.id">
            <td>{{ user.id }}</td>
            <td>
              <div class="user-avatar">
                <img v-if="user.avatar" :src="user.avatar" alt="用户头像">
                <div v-else class="avatar-placeholder">
                  {{ getUserInitials(user.username) }}
                </div>
              </div>
            </td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ formatDate(user.registerDate) }}</td>
            <td>
              <span :class="['role-tag', 'role-' + user.role]">
                {{ getRoleText(user.role) }}
              </span>
            </td>
            <td>{{ user.challengeCount }}</td>
            <td>{{ user.points }}</td>
            <td>
              <span :class="['status-tag', 'status-' + user.status]">
                {{ getStatusText(user.status) }}
              </span>
            </td>
            <td class="actions-cell">
              <div class="actions-wrapper">
                <button class="action-btn view-btn" @click="viewUser(user)">
                  查看
                </button>
                <button class="action-btn edit-btn" @click="editUser(user)">
                  编辑
                </button>
                <button 
                  :class="['action-btn', user.status === 'blocked' ? 'unblock-btn' : 'block-btn']" 
                  @click="toggleUserStatus(user)"
                >
                  {{ user.status === 'blocked' ? '解封' : '封禁' }}
                </button>
              </div>
            </td>
          </tr>
          <tr v-if="filteredUsers.length === 0">
            <td colspan="10" class="empty-message">
              <div class="empty-content">
                <div class="empty-icon">👥</div>
                <div class="empty-text">
                  {{ searchQuery || statusFilter || roleFilter ? '没有找到匹配的用户' : '暂无用户数据' }}
                </div>
                <div class="empty-action" v-if="searchQuery || statusFilter || roleFilter">
                  <button class="admin-btn" @click="resetFilters">重置筛选</button>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- 分页器 -->
    <div class="pagination">
      <div class="pagination-info">
        共 {{ totalItems }} 项，每页 {{ pageSize }} 项，当前第 {{ currentPage }} 页
      </div>
      <div class="pagination-buttons">
        <button 
          :disabled="currentPage === 1" 
          @click="changePage(currentPage - 1)"
          class="pagination-btn"
        >
          上一页
        </button>
        <button 
          v-for="page in displayedPages" 
          :key="page" 
          :class="['pagination-btn', page === currentPage ? 'active' : '']"
          @click="changePage(page)"
        >
          {{ page }}
        </button>
        <button 
          :disabled="currentPage === totalPages" 
          @click="changePage(currentPage + 1)"
          class="pagination-btn"
        >
          下一页
        </button>
      </div>
    </div>
    
    <!-- 用户详情对话框 -->
    <div class="modal-overlay" v-if="showUserModal">
      <div class="modal-container user-detail-modal">
        <div class="modal-header">
          <h3>用户详情</h3>
          <button class="close-btn" @click="closeUserModal">×</button>
        </div>
        <div class="modal-body">
          <div class="user-detail-header">
            <div class="user-detail-avatar">
              <img v-if="selectedUser.avatar" :src="selectedUser.avatar" alt="用户头像">
              <div v-else class="avatar-placeholder large">
                {{ getUserInitials(selectedUser.username) }}
              </div>
            </div>
            <div class="user-detail-info">
              <h2 class="user-detail-name">{{ selectedUser.username }}</h2>
              <div class="user-detail-meta">
                <div class="meta-item">
                  <span class="meta-label">ID:</span>
                  <span class="meta-value">{{ selectedUser.id }}</span>
                </div>
                <div class="meta-item">
                  <span class="meta-label">邮箱:</span>
                  <span class="meta-value">{{ selectedUser.email }}</span>
                </div>
                <div class="meta-item">
                  <span class="meta-label">注册时间:</span>
                  <span class="meta-value">{{ formatDate(selectedUser.registerDate) }}</span>
                </div>
                <div class="meta-item">
                  <span class="meta-label">最近登录:</span>
                  <span class="meta-value">{{ formatDateTime(selectedUser.lastLoginTime) }}</span>
                </div>
              </div>
            </div>
            <div class="user-detail-status">
              <div class="status-item">
                <div class="status-value">{{ selectedUser.challengeCount }}</div>
                <div class="status-label">挑战数</div>
              </div>
              <div class="status-item">
                <div class="status-value">{{ selectedUser.taskCount }}</div>
                <div class="status-label">任务数</div>
              </div>
              <div class="status-item">
                <div class="status-value">{{ selectedUser.points }}</div>
                <div class="status-label">积分</div>
              </div>
            </div>
          </div>
          
          <div class="user-detail-tabs">
            <div 
              :class="['user-detail-tab', activeTab === 'activity' ? 'active' : '']"
              @click="activeTab = 'activity'"
            >
              活动记录
            </div>
            <div 
              :class="['user-detail-tab', activeTab === 'challenges' ? 'active' : '']"
              @click="activeTab = 'challenges'"
            >
              参与挑战
            </div>
            <div 
              :class="['user-detail-tab', activeTab === 'points' ? 'active' : '']"
              @click="activeTab = 'points'"
            >
              积分记录
            </div>
          </div>
          
          <div class="user-detail-content">
            <!-- 活动记录 -->
            <div v-if="activeTab === 'activity'" class="activity-list">
              <div v-if="selectedUser.activities && selectedUser.activities.length > 0">
                <div 
                  v-for="(activity, index) in selectedUser.activities" 
                  :key="index"
                  class="activity-item"
                >
                  <div class="activity-time">{{ formatDateTime(activity.time) }}</div>
                  <div class="activity-content">{{ activity.content }}</div>
                </div>
              </div>
              <div v-else class="empty-data">
                <div class="empty-icon">📝</div>
                <div class="empty-text">暂无活动记录</div>
              </div>
            </div>
            
            <!-- 参与挑战 -->
            <div v-if="activeTab === 'challenges'" class="challenges-list">
              <div v-if="selectedUser.challenges && selectedUser.challenges.length > 0">
                <div 
                  v-for="(challenge, index) in selectedUser.challenges" 
                  :key="index"
                  class="challenge-item"
                >
                  <div class="challenge-name">{{ challenge.name }}</div>
                  <div class="challenge-date">{{ formatDate(challenge.date) }}</div>
                  <div class="challenge-status">{{ challenge.status }}</div>
                </div>
              </div>
              <div v-else class="empty-data">
                <div class="empty-icon">🏆</div>
                <div class="empty-text">暂无参与挑战</div>
              </div>
            </div>
            
            <!-- 积分记录 -->
            <div v-if="activeTab === 'points'" class="points-list">
              <div v-if="selectedUser.pointsHistory && selectedUser.pointsHistory.length > 0">
                <div 
                  v-for="(record, index) in selectedUser.pointsHistory" 
                  :key="index"
                  class="points-item"
                >
                  <div class="points-time">{{ formatDateTime(record.time) }}</div>
                  <div class="points-description">{{ record.description }}</div>
                  <div :class="['points-value', record.amount > 0 ? 'positive' : 'negative']">
                    {{ record.amount > 0 ? '+' : '' }}{{ record.amount }}
                  </div>
                </div>
              </div>
              <div v-else class="empty-data">
                <div class="empty-icon">🎁</div>
                <div class="empty-text">暂无积分记录</div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="admin-btn" @click="closeUserModal">关闭</button>
          <router-link :to="`/admin/users/${selectedUser.id}`" class="admin-btn admin-btn-primary">
            编辑用户
          </router-link>
        </div>
      </div>
    </div>

    <!-- 用户编辑对话框 -->
    <div class="modal-overlay" v-if="showEditModal">
      <div class="modal-container user-edit-modal">
        <div class="modal-header">
          <h3>编辑用户</h3>
          <button class="close-btn" @click="closeEditModal">×</button>
        </div>
        <div class="modal-body">
          <div v-if="editingUser">
            <form @submit.prevent="saveUserEdit">
              <div class="form-group">
                <label>用户名</label>
                <input type="text" v-model="editingUser.userName" class="admin-form-input" />
              </div>
              <div class="form-group">
                <label>昵称</label>
                <input type="text" v-model="editingUser.nickName" class="admin-form-input" />
              </div>
              <div class="form-group">
                <label>手机号</label>
                <input type="text" v-model="editingUser.phone" class="admin-form-input" />
              </div>
              <div class="form-group">
                <label>电子邮箱</label>
                <input type="email" v-model="editingUser.email" class="admin-form-input" />
              </div>
              <div class="form-group">
                <label>性别</label>
                <select v-model="editingUser.sex" class="admin-form-input">
                  <option :value="1">男</option>
                  <option :value="2">女</option>
                  <option :value="0">未设置</option>
                </select>
              </div>
              <div class="form-group">
                <label>状态</label>
                <select v-model="editingUser.status" class="admin-form-input">
                  <option :value="0">活跃</option>
                  <option :value="1">非活跃</option>
                  <option :value="2">已封禁</option>
                </select>
              </div>
              <div class="form-group">
                <label>头像URL</label>
                <input type="text" v-model="editingUser.avatar" class="admin-form-input" />
              </div>
              <div class="form-group">
                <label>用户简介</label>
                <textarea v-model="editingUser.introduce" rows="4" class="admin-form-input"></textarea>
              </div>
            </form>
          </div>
          <div v-else class="loading-container">
            <div class="loading-spinner"></div>
            <p>加载用户数据中...</p>
          </div>
        </div>
        <div class="modal-footer">
          <button class="admin-btn" @click="closeEditModal">取消</button>
          <button class="admin-btn admin-btn-primary" @click="saveUserEdit" :disabled="!editingUser">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserList, getCurrentUserInfo, updateUserInfo } from '@/api/auth'

export default {
  name: 'AdminUsers',
  data() {
    return {
      users: [],
      loading: false,
      searchQuery: '',
      statusFilter: '',
      roleFilter: '',
      currentPage: 1,
      pageSize: 20,
      totalItems: 0,
      showUserModal: false,
      selectedUser: {},
      activeTab: 'activity',
      
      // 用户编辑相关数据
      showEditModal: false,
      editingUser: null,
      
      // 用户详情模拟数据
      userActivities: [],
      userChallenges: [],
      userPoints: []
    }
  },
  computed: {
    filteredUsers() {
      let result = [...this.users]
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(user => 
          user.username.toLowerCase().includes(query) || 
          user.email.toLowerCase().includes(query)
        )
      }
      
      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(user => user.status === this.statusFilter)
      }
      
      // 角色过滤
      if (this.roleFilter) {
        result = result.filter(user => user.role === this.roleFilter)
      }
      
      // 分页
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      
      return result.slice(startIndex, endIndex)
    },
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize)
    },
    displayedPages() {
      const pages = []
      const maxVisiblePages = 5
      
      let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2))
      let endPage = startPage + maxVisiblePages - 1
      
      if (endPage > this.totalPages) {
        endPage = this.totalPages
        startPage = Math.max(1, endPage - maxVisiblePages + 1)
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i)
      }
      
      return pages
    }
  },
  created() {
    this.fetchUsers()
    this.generateUserActivities()
  },
  methods: {
    fetchUsers() {
      this.loading = true
      
      // 构建查询参数
      const params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      
      // 添加搜索条件
      if (this.searchQuery) {
        params.userName = this.searchQuery
      }
      
      // 添加状态过滤
      if (this.statusFilter) {
        params.status = this.statusFilter
      }
      
      // 添加角色过滤
      if (this.roleFilter) {
        params.role = this.roleFilter
      }
      
      // 调用API获取数据
      getUserList(params)
        .then(response => {
          // 处理各种可能的响应格式
          let responseData = response;
          
          // 如果响应中有success字段，检查是否成功并获取data
          if (Object.prototype.hasOwnProperty.call(response, 'success')) {
            if (!response.success) {
              this.showNotification('获取用户列表失败: ' + (response.message || '未知错误'), 'error');
              return;
            }
            responseData = response.data || {};
          }
          
          // 确定用户列表数据
          let userList = [];
          
          if (Array.isArray(responseData)) {
            // 直接是数组形式
            userList = responseData;
          } else if (responseData.result && Array.isArray(responseData.result)) {
            // result字段包含数组
            userList = responseData.result;
          } else if (responseData.list && Array.isArray(responseData.list)) {
            // list字段包含数组
            userList = responseData.list;
          } else if (responseData.records && Array.isArray(responseData.records)) {
            // records字段包含数组
            userList = responseData.records;
          } else if (responseData.data && Array.isArray(responseData.data)) {
            // data字段包含数组
            userList = responseData.data;
          }
          
          // 设置总条数
          this.totalItems = responseData.total || userList.length;
          
          // 转换用户数据为组件使用的格式
          this.users = userList.map(user => {
            // 根据后端状态值映射到前端状态名称
            let statusName = 'active';
            if (user.status === 1) {
              statusName = 'blocked';
            } else if (user.status === 2) {
              statusName = 'inactive';
            }
            
            return {
              id: user.id,
              username: user.userName || user.username || user.nickName || '未命名',
              email: user.email || '',
              avatar: user.avatar || '',
              registerDate: user.createTime || user.createDate || user.registerDate || user.registerTime || '',
              lastLoginTime: user.lastLoginTime || user.lastLogin || '',
              role: user.role || user.userRole || 'user',
              status: statusName,
              statusValue: user.status, // 保存原始状态值
              challengeCount: user.challengeCount || user.challenges || 0,
              taskCount: user.taskCount || user.tasks || 0,
              points: user.points || user.userPoints || 0,
              phone: user.phone || '',
              sex: user.sex || null,
              introduce: user.introduce || ''
            };
          });
          
          if (this.users.length === 0) {
            this.showNotification('没有找到任何用户数据', 'info');
          }
        })
        .catch(error => {
          this.showNotification('获取用户列表失败: ' + (error.message || '未知错误'), 'error');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getRoleText(role) {
      const roleMap = {
        'user': '用户',
        'vip': 'VIP',
        'moderator': '版主'
      }
      return roleMap[role] || '未知'
    },
    getStatusText(status) {
      const statusMap = {
        'active': '活跃',
        'inactive': '非活跃',
        'blocked': '已封禁'
      }
      return statusMap[status] || '未知'
    },
    formatDate(dateString) {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    formatDateTime(dateTimeString) {
      if (!dateTimeString) return '未知'
      return dateTimeString
    },
    getUserInitials(username) {
      if (!username) return '?'
      return username.charAt(0).toUpperCase()
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchUsers()
    },
    handleFilter() {
      this.currentPage = 1
      this.fetchUsers()
    },
    resetFilters() {
      this.searchQuery = ''
      this.statusFilter = ''
      this.roleFilter = ''
      this.currentPage = 1
      this.fetchUsers()
    },
    changePage(page) {
      this.currentPage = page
      this.fetchUsers()
    },
    exportData() {
      // 实际应用中会调用导出API
      alert('导出数据功能将在实际应用中实现')
    },
    viewUser(user) {
      this.selectedUser = user
      this.showUserModal = true
      this.activeTab = 'activity'
    },
    closeUserModal() {
      this.showUserModal = false
      this.selectedUser = {}
    },
    toggleUserStatus(user) {
      this.loading = true;
      
      // 准备要更新的用户数据，根据当前状态切换
      const updatedStatus = user.status === 'blocked' ? 0 : 1;
      const actionText = updatedStatus === 0 ? '解封' : '封禁';
      
      // 如果是封禁操作，需要确认
      if (updatedStatus === 1 && !confirm(`确定要${actionText}用户 ${user.username} 吗？`)) {
        this.loading = false;
        return;
      }
      
      // 准备API请求数据
      const updateData = {
        id: user.id,
        userName: user.username,
        status: updatedStatus
      };
      
      // 调用API更新用户状态
      updateUserInfo(updateData)
        .then(response => {
          if (response.success) {
            this.showNotification(`用户 ${user.username} 已${actionText}`, 'success');
            // 刷新用户列表以获取最新数据
            this.fetchUsers();
          } else {
            this.showNotification(`${actionText}用户失败: ` + (response.message || '未知错误'), 'error');
          }
        })
        .catch(error => {
          console.error(`${actionText}用户失败:`, error);
          this.showNotification(`${actionText}用户失败: ` + (error.message || '未知错误'), 'error');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    editUser(user) {
      // 设置加载状态并打开模态框
      this.showEditModal = true
      this.editingUser = null
      this.loading = true
      
      // 调用获取用户信息的API
      getCurrentUserInfo(user.username, true)
        .then(response => {
          // 检查响应是否成功
          if (response.success && response.data) {
            console.log('获取用户详情成功:', response.data)
            // 直接将获取的数据设置到编辑状态中
            this.editingUser = response.data
          } else {
            this.showNotification('获取用户详情失败: ' + (response.message || '未知错误'), 'error')
            this.closeEditModal()
          }
        })
        .catch(error => {
          console.error('获取用户详情失败:', error)
          this.showNotification('获取用户详情失败: ' + (error.message || '未知错误'), 'error')
          this.closeEditModal()
        })
        .finally(() => {
          this.loading = false
        })
    },
    closeEditModal() {
      this.showEditModal = false
      this.editingUser = null
    },
    saveUserEdit() {
      if (!this.editingUser) return
      
      this.loading = true
      
      updateUserInfo(this.editingUser)
        .then(response => {
          if (response.success) {
            this.showNotification('用户信息更新成功', 'success')
            this.closeEditModal()
            this.fetchUsers() // 重新获取用户列表
          } else {
            this.showNotification('更新用户信息失败: ' + (response.message || '未知错误'), 'error')
          }
        })
        .catch(error => {
          console.error('更新用户信息失败:', error)
          this.showNotification('更新用户信息失败: ' + (error.message || '未知错误'), 'error')
        })
        .finally(() => {
          this.loading = false
        })
    },
    generateUserActivities() {
      // 生成模拟用户活动数据，用于用户详情模态框
      this.userActivities = [
        { time: '2023-04-15 14:30:22', content: '登录系统' },
        { time: '2023-04-15 10:15:45', content: '完成"绿色出行"挑战打卡' },
        { time: '2023-04-14 16:22:10', content: '获得50积分奖励' }
      ]
      
      this.userChallenges = [
        { name: '7天低碳生活', date: '2023-03-01', status: '已完成' },
        { name: '垃圾分类达人', date: '2023-02-15', status: '进行中' }
      ]
      
      this.userPoints = [
        { time: '2023-04-15 10:15:45', description: '完成任务打卡', amount: 10 },
        { time: '2023-04-14 16:22:10', description: '完成"垃圾分类"挑战', amount: 50 },
        { time: '2023-04-10 09:30:00', description: '购买环保水杯', amount: -30 }
      ]
    },
    showNotification(message, type = 'info') {
      // 如果Vue有全局通知组件，使用它
      if (this.$notify) {
        this.$notify({
          title: type === 'error' ? '错误' : (type === 'success' ? '成功' : '通知'),
          message: message,
          type: type,
          duration: 3000
        })
      } else {
        // 否则使用alert
        alert(message)
      }
    }
  }
}
</script>

<style scoped>
.admin-users {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-height: 100%;
  padding: 0;
}

/* 猫咪装饰区域 */
.cat-playground {
  position: relative;
  height: 180px;
  margin: 0;
  background-color: rgba(248, 255, 240, 0.5);
  border-radius: 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
  overflow: hidden;
}

.sleeping-cat {
  position: absolute;
  bottom: 30px;
  right: 100px;
  width: 120px;
  height: 60px;
}

.cat-body {
  position: relative;
  height: 100%;
  width: 100%;
}

.cat-head {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #a58163;
  border-radius: 50%;
  z-index: 2;
  top: 0;
  left: 10px;
}

.cat-ear {
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 15px solid #a58163;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: -8px;
}

.cat-ear.left {
  left: -5px;
  transform: rotate(-30deg);
}

.cat-ear.right {
  right: -5px;
  transform: rotate(30deg);
}

.cat-face {
  position: relative;
  padding-top: 15px;
}

.cat-eyes {
  display: flex;
  justify-content: space-evenly;
}

.cat-eye {
  width: 8px;
  height: 2px;
  background-color: #333;
  border-radius: 50%;
}

.cat-torso {
  position: absolute;
  width: 70px;
  height: 35px;
  background-color: #a58163;
  border-radius: 50px / 30px;
  top: 20px;
  left: 20px;
  transform: rotate(5deg);
}

.cat-tail {
  position: absolute;
  width: 40px;
  height: 10px;
  background-color: #a58163;
  border-radius: 5px;
  right: 0;
  top: 30px;
  transform-origin: right center;
  animation: tail-twitch 4s infinite ease-in-out;
}

@keyframes tail-twitch {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
}

.zzz {
  position: absolute;
  top: -15px;
  left: -10px;
  font-size: 16px;
  font-weight: bold;
  color: #666;
}

.zzz span {
  position: absolute;
  opacity: 0;
  animation: float-up 3s infinite linear;
}

.zzz span:nth-child(1) {
  animation-delay: 0s;
  font-size: 18px;
}

.zzz span:nth-child(2) {
  animation-delay: 1s;
  font-size: 16px;
}

.zzz span:nth-child(3) {
  animation-delay: 2s;
  font-size: 14px;
}

@keyframes float-up {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-20px, -30px) rotate(-10deg); opacity: 0; }
}

.plants {
  position: absolute;
  bottom: 0;
  left: 50px;
  display: flex;
  gap: 20px;
}

.plant {
  width: 8px;
  height: 40px;
  background-color: #4CAF50;
  position: relative;
  border-radius: 4px;
}

.plant:before, .plant:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 15px;
  background-color: #4CAF50;
  border-radius: 50% 50% 0 0;
}

.plant:before {
  top: -10px;
  left: -16px;
  transform: rotate(45deg);
}

.plant:after {
  top: -10px;
  right: -16px;
  transform: rotate(-45deg);
}

.plant:nth-child(2) {
  height: 60px;
}

.plant:nth-child(3) {
  height: 50px;
}

.user-tip {
  position: absolute;
  top: 30px;
  left: 50px;
  background-color: white;
  padding: 10px 15px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
}

.tip-icon {
  font-size: 18px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.tip-text {
  font-size: 14px;
  color: #333;
}

/* 工具栏样式 */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.search-box {
  position: relative;
  min-width: 250px;
}

.search-input {
  padding-right: 40px;
}

.search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.filter-options {
  display: flex;
  gap: 16px;
}

.filter-select {
  min-width: 120px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

/* 用户列表样式 */
.users-list {
  width: 100%;
  overflow-x: auto;
  padding: 0 24px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 32px;
  height: 32px;
  background-color: #1890ff;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.avatar-placeholder.large {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.role-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.role-user {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.role-vip {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.role-moderator {
  background-color: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.status-active {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-inactive {
  background-color: #f5f5f5;
  color: #666666;
  border: 1px solid #d9d9d9;
}

.status-blocked {
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffa39e;
}

.actions-cell {
  text-align: center;
}

.actions-wrapper {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.action-btn {
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.view-btn {
  background-color: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.edit-btn {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.block-btn {
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffa39e;
}

.unblock-btn {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.empty-message {
  padding: 40px 0;
  text-align: center;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-icon {
  font-size: 32px;
  color: #d9d9d9;
}

.empty-text {
  color: rgba(0, 0, 0, 0.45);
}

/* 分页器样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-info {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.pagination-buttons {
  display: flex;
  gap: 8px;
}

.pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  background-color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  color: #1890ff;
  border-color: #1890ff;
}

.pagination-btn.active {
  color: white;
  background-color: #1890ff;
  border-color: #1890ff;
}

.pagination-btn:disabled {
  color: rgba(0, 0, 0, 0.25);
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 400px;
  animation: modalFadeIn 0.3s;
}

.user-detail-modal {
  width: 700px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 用户详情样式 */
.user-detail-header {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.user-detail-avatar {
  width: 64px;
  height: 64px;
}

.user-detail-info {
  flex: 1;
  min-width: 200px;
}

.user-detail-name {
  margin: 0 0 12px 0;
  font-size: 20px;
}

.user-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  color: rgba(0, 0, 0, 0.45);
  margin-right: 8px;
}

.user-detail-status {
  display: flex;
  gap: 24px;
}

.status-item {
  text-align: center;
}

.status-value {
  font-size: 24px;
  font-weight: 600;
  color: #1890ff;
}

.status-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.user-detail-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.user-detail-tab {
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  color: rgba(0, 0, 0, 0.65);
  transition: all 0.3s;
}

.user-detail-tab:hover {
  color: #1890ff;
}

.user-detail-tab.active {
  color: #1890ff;
}

.user-detail-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1890ff;
}

.user-detail-content {
  padding: 16px 0;
}

/* 活动列表 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-time {
  width: 150px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.activity-content {
  flex: 1;
}

/* 挑战列表 */
.challenges-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.challenge-item {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.challenge-name {
  width: 200px;
  font-weight: 500;
}

.challenge-date {
  width: 100px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.challenge-status {
  flex: 1;
}

/* 积分记录 */
.points-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.points-item {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.points-time {
  width: 150px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.points-description {
  flex: 1;
}

.points-value {
  width: 80px;
  text-align: right;
  font-weight: 500;
}

.points-value.positive {
  color: #52c41a;
}

.points-value.negative {
  color: #ff4d4f;
}

.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  color: rgba(0, 0, 0, 0.45);
}

.empty-data .empty-icon {
  font-size: 36px;
  margin-bottom: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-box,
  .filter-options,
  .action-buttons {
    width: 100%;
  }
  
  .filter-options {
    flex-direction: column;
    gap: 8px;
  }
  
  .pagination {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .user-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .user-detail-meta {
    grid-template-columns: 1fr;
  }
  
  .user-detail-status {
    margin-top: 16px;
    justify-content: center;
  }
  
  .activity-item,
  .challenge-item,
  .points-item {
    flex-direction: column;
    gap: 4px;
  }
  
  .activity-time,
  .challenge-date,
  .points-time,
  .challenge-name,
  .points-value {
    width: auto;
  }
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  margin: 20px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(24, 144, 255, 0.2);
  border-radius: 50%;
  border-top-color: #1890ff;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 通知样式 */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  max-width: 350px;
}

.notification {
  padding: 12px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 12px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification-info {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  color: #1890ff;
}

.notification-success {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #52c41a;
}

.notification-error {
  background-color: #fff1f0;
  border: 1px solid #ffa39e;
  color: #ff4d4f;
}

.notification-message {
  font-size: 14px;
  flex: 1;
}

.notification-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 12px;
}

/* 通知关闭按钮 */
.notification-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 12px;
}

/* 用户编辑表单样式 */
.user-edit-modal {
  width: 600px;
  max-width: 90vw;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.admin-form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 14px;
}

.admin-form-input:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  outline: none;
}

textarea.admin-form-input {
  resize: vertical;
  min-height: 80px;
}

select.admin-form-input {
  height: 36px;
  background-color: white;
}

.admin-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.admin-btn:hover {
  color: #40a9ff;
  border-color: #40a9ff;
}

.admin-btn-primary {
  color: white;
  background-color: #1890ff;
  border-color: #1890ff;
}

.admin-btn-primary:hover {
  color: white;
  background-color: #40a9ff;
  border-color: #40a9ff;
}

.admin-btn:disabled {
  color: rgba(0, 0, 0, 0.25);
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  cursor: not-allowed;
}
</style> 